<template>
  <div class="announcement-detail">
    <div class="detail-header">
      <h1>{{ announcement.title }}</h1>
      <div class="meta-info">
        <span class="date">发布时间：{{ announcement.date }}</span>
        <span class="author">发布人：{{ announcement.author }}</span>
      </div>
    </div>
    
    <div class="detail-content" v-html="announcement.content"></div>
    
    <div class="detail-footer">
      <el-button @click="goBack" icon="el-icon-back">返回</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'AnnouncementDetail',
  
  data() {
    return {
      announcement: {
        id: '',
        title: '',
        content: '',
        date: '',
        author: ''
      }
    }
  },
  
  created() {
    this.fetchAnnouncementDetail();
  },
  
  methods: {
    async fetchAnnouncementDetail() {
      try {
        const id = this.$route.query.id;
        const response = await axios.get(`/api/announcements/detail/${id}`);
        if (response.data.code === 200) {
          this.announcement = response.data.data;
        }
       
      } catch (error) {
        console.error('获取公告详情失败:', error);
        this.$message.error('获取公告详情失败');
      }
    },
    
    goBack() {
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
.announcement-detail {
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.detail-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.detail-header h1 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 1rem;
}

.meta-info {
  color: #999;
  font-size: 0.9rem;
}

.meta-info span {
  margin-right: 2rem;
}

.detail-content {
  line-height: 1.8;
  color: #666;
  min-height: 300px;
}

.detail-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

@media (max-width: 768px) {
  .announcement-detail {
    padding: 1rem;
  }
  
  .detail-header h1 {
    font-size: 1.4rem;
  }
  
  .meta-info span {
    display: block;
    margin-bottom: 0.5rem;
  }
}
</style> 